<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>举报登记表</title>
  <link href="css/tail.css" rel="stylesheet" type="text/css">
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" href="css/about.css">
  <script src="js/jquery-2.2.0.min.js"></script>
  <script src="js/bstable/js/bootstrap.min.js"></script>
  <script src="js/layer_v2.1/layer/layer.js"></script>
</head>
<body style="border-radius: 8px;">
<form id="uploadId">
  <div class="top table2_top">
    <div class="l_left" style="width: 60%;height: 90%">
      <div class="top_out">
        <table class="table">
          <tbody>
          <tr>
            <td>灯具名称<span>*</span></td>
            <td><input type="text" name="name" class="long_text" value=""></td>
            <td>灯具类型<span></span></td>
            <td><input type="text" name="type" class="long_text" value=""></td>
          </tr>
          <tr>

            <td>品牌<span></span></td>
            <td><input type="text" name="lampBand" value=""></td>
            <td>安装时间<span></span></td>
            <td><input type="text" name="insTime" value=""></td>

          </tr>
          <tr>
            <td>电流<span></span></td>
            <td><input type="text" name="A"></td>
            <td>电压<span></span></td>
            <td><input type="text" name="V"></td>

          </tr>
          <tr>
            <td>在线状态</td>
            <td><select name="status">
              <option>在线</option>
            </select></td>
            <td>开关状态<span></span></td>
            <td><select name="status01">
              <option>可用</option>
            </select></td>

          </tr>
          <tr>
            <td>省市区<span></span></td>
            <td>
              <!--                    <div style="text-align: center">-->

              <select id="province" style="width: 150px" name="province">
                <option>请选择省份</option>
              </select>
              <select id="city" style="width: 150px" name="city">
                <option>请选择城市</option>
              </select>

              <select id="town" style="width: 150px" name="low">
                <option>请选择县/区</option>
              </select>
              <select id=""></select>
              <!--                    </div>-->
            </td>
          </tr>

          </tbody>
        </table>

        <table class="table">
          <tr>
            <td>坐标位置<span></span></td>

            <td colspan="3">
              <input id="x_c" placeholder="X坐标" name="x" type="text" class="pointInput"/>
              <input id="y_c" placeholder="Y坐标" name="y" type="text" class="pointInput"/>
              <input type="button" value="点击选择" class="check_btn"/>
            </td>
          </tr>
          <tr>
            <td>备注<span></span></td>
            <td colspan="3" style="text-align: left"><textarea name="content" style="width: 510px"></textarea></td>
          </tr>

          <tr>
            <td>图片<span></span></td>
            <td><input type="file" onchange="getImg(this,addImg)" name="file"> <img src="" height="150px"
                                                                                    width="150px" id="addImg"></td>

            <!--              <td colspan="3" style="text-align: left">-->

            <!--              </td>-->

          </tr>
        </table>

      </div>
    </div>
    <div class="r_right" style="width: 40%;height: 90%">

      <div id="rightDIV" class="r_right checkMap" style="width: 100%;height: 70%">

      </div>
      <div id="r-result" style="width: 100%;height: 10%">请输入地址:<input type="text" id="suggestId" size="20" name="url" value="百度"
                                                                      style="width:150px;"/></div>
      <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>


    </div>

    <div class="notice_bot">
      <div class="l_left"><input type="checkbox" checked="checked"/>保存并关闭窗口</div>
      <div class="r_right but_p">
        <!--<select style="">
          <option>核查</option>
        </select>-->
        <!--<button class="but_save btn-warning" type="button" style="background-color: #963232">误报</button> -->

        <input class="but_save btn-warning" type="button" onclick="addLamp()" value="保存"></input>
        <input class="but_close" onclick="Cancel()" value="取消"></input>
      </div>
    </div>
  </div>
</form>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
<script type="text/javascript" src="js/script/area.js"></script>
<script type="text/javascript" src="js/script/select.js"></script>

<script>
  //    alert(window.location.href.split("?")[1]);
  function getImg(fileDom, imgDom) {
    var file = new FileReader();
    file.readAsDataURL(fileDom.files[0]);
    file.onload = function () {
      imgDom.src = this.result;
    }
  }

  function addLamp() {
    $.ajax({
      url: "/addLamp",
      data: new FormData($("#uploadId")[0]),
      type: "post",
      dataType: "text",
      processData: false,
      contentType: false,
      success: function (data) {
        if (data == "1") {
          alert("添加成功");
          parent.location.href = "setLight.html";
        } else {
          alert("添加失败");
        }
      }
    })
  }

  function Cancel() {
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
  }

  function save() {
    layer.msg('数据提交中', {
      icon: 16,
      shade: 0.01,
      time: 20000
    });
    setTimeout(function () {
      layer.closeAll('dialog');
    }, 3000);
  }

  function imgBig() {
    layer.open({
      type: 2,
      title: '图片信息',
      shadeClose: true,
      shade: 0.5,
      skin: 'layui-layer-rim',
      closeBtn: 1,
      area: ['360px', '300px'],
      content: 'imgBig.html'
    });
  }

  $(function () {
    $(".reportImg").click(function () {
      imgBig();
    });
    debugger;
    var height = $("#rightDIV").height();
    var width = $("#rightDIV").width();
    $(".event_list").css("height", height);
    $(".event_list").css("width", width - 1);

  })

  //转派
  function trans() {
    layer.open({
      type: 2,
      title: '转派至',
      shadeClose: true,
      shade: 0.5,
      skin: 'layui-layer-rim',
      closeBtn: 1,
      area: ['650px', '380px'],
      content: 'riverTree.html'
    });
  }
</script>
<script>

  function G(id) {
    return document.getElementById(id);
  }

  // 百度地图API功能
  var map = new BMap.Map("rightDIV");    // 创建Map实例

  var point = new BMap.Point(104.557183, 30.40643);
  map.centerAndZoom(point, 15);

  //添加地图类型控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes: [
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
    ]
  }));
  map.setCurrentCity("简阳");          // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  var circle = new BMap.Circle(point, 500, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5}); //创建圆
  //添加覆盖物
  function add_overlay() {

    map.addOverlay(circle);            //增加圆

  }

  function init() {
    add_overlay();
  }

  var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    {
      "input": "suggestId"
      , "location": map
    });

  ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
      value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

    value = "";
    if (e.toitem.index > -1) {
      _value = e.toitem.value;
      value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("searchResultPanel").innerHTML = str;
  });

  var myValue;
  ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
    G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

    setPlace();
  });

  function setPlace() {
    map.clearOverlays();    //清除地图上所有覆盖物
    function myFun() {
      var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
      map.centerAndZoom(pp, 18);
      map.addOverlay(new BMap.Marker(pp));    //添加标注

      G("x_c").value = pp.lng;
      G("y_c").value = pp.lat;
    }

    var local = new BMap.LocalSearch(map, { //智能搜索
      onSearchComplete: myFun
    });
    local.search(myValue);
  }
</script>
</body>
</html>
